<template>
  <div class="loginTypePage">
    <div class="contain">
      <img :src="appLogo" alt="">
      <div @click="handleLogin">
        <span>邮箱登录</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import appLogo from '@/assets/image/appLogo.png';

import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const { id } = route.query;
const handleLogin = () => {
  router.push({
    name: 'loginPage',
    query: { id }
  });
}

</script>
<style scoped lang="less">
div.loginTypePage {
  width: 100%;
  height: 100%;
  background: #ffc600;
  position: relative;
  div.contain {
    width: calc(100% - 64px);
    height: 305px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100px;
      height: 100px;
      display: block;
      margin: 0 auto 150px;
    }
    >div {
      height: 48px;
      line-height: 48px;
      text-align: center;
      border-radius: 29px;
      background: #ffffff;
      span {
        font-weight: bold;
        font-size: 16px;
        color: #000000;
      }
    }
  }
}
</style>
